<template>
	<view class="main-box" v-if="is==0">
		<view class="login-main-box" v-if="flag">
			<view class="login-box">
				<image @click="cancelLogin" style="position: absolute;" class="login-close-icon" mode="widthFix"
					src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fcomponents%2Flogin%2Fclose.png">
				</image>
				<image v-if="name=='0'" class="bg-image" mode="widthFix"
					src="https://h5.sx2b2c.com/images/tequan/bigyear.png">
				</image>
				<image v-if="name=='1'" class="bg-image" mode="widthFix"
					src="https://h5.sx2b2c.com/images/tequan/bigmonth.png">
				</image>

				<view class="form-box">
					<view class="input-item-box">
						<view class="input-box">
							<input type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" @input="input">
						</view>

					</view>
					<view class="agreement-box">
						<u-checkbox-group style="background-color: aliceblue;">
							<u-checkbox v-model="checked" shape="square" size="30rpx"></u-checkbox>
						</u-checkbox-group>
						<text style="margin-left: 10rpx;">已阅读且同意</text>
						<text class="tip" @tap="show=true">
							《订购须知》
						</text>
						<text class="tip" @tap="showx=true">
							《隐私政策》
						</text>
					</view>


				</view>
			</view>
			<image class="btn" @click="zhifu" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fcomponents%2Flogin%2Fbtn.png">
			</image>

		</view>

		<view class="agreement-main-box" v-if="show" style="z-index: 999;">
			<view class="agreement-box">
				<view class="title">{{title}}</view>
				<view class="content-box">
					<view class="content" v-for="item in content">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="show=false">我知道了</view>
			</view>
		</view>
		<view class="agreement-main-box" v-if="showx" style="z-index: 999;">
			<view class="agreement-box">
				<view class="title">{{title1}}</view>
				<view class="content-box">
					<view class="content" v-for="item in content1">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="showx=false">我知道了</view>
			</view>
		</view>
		<image class="bg" mode="widthFix" src="https://h5.sx2b2c.com/images/tequan/back.jpg"></image>
		<view class="swiper" style="margin-left: -50rpx;">

			<u-swiper @click='changex' mode="none" :list="imgList" :effect3d="true" bgColor="transparent"
				:effect3d-previous-margin='270'></u-swiper>

		</view>
		<view class="submit-fix-box">
			<image @click="showLogin" class="submit-fix" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fsubmit-fix.png">
			</image>
		</view>
		<view class="fix-order-main-box">
			<image @click="gotoOrderLists" class="icon" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Forder-icon.png">
			</image>
		</view>


	</view>
	<view class="" v-else>
		<view class="login-main-box" v-if="flag">
			<view class="login-box">
				<image @click="cancelLogin" style="position: absolute;" class="login-close-icon" mode="widthFix"
					src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fcomponents%2Flogin%2Fclose.png">
				</image>
				<image v-if="name=='0'" class="bg-image" mode="widthFix"
					src="https://h5.sx2b2c.com/images/tequan/bigyear.png">
				</image>
				<image v-if="name=='1'" class="bg-image" mode="widthFix"
					src="https://h5.sx2b2c.com/images/tequan/bigmonth.png">
				</image>

				<view class="form-box">
					<view class="input-item-box">
						<view class="input-box">
							<input type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" @input="input">
						</view>

					</view>
					<view class="agreement-box">
						<u-checkbox-group style="background-color: aliceblue;">
							<u-checkbox v-model="checked" shape="square" size="30rpx"></u-checkbox>
						</u-checkbox-group>
						<text style="margin-left: 10rpx;">已阅读且同意</text>
						<text class="tip" @tap="show=true">
							《订购须知》
						</text>
						<text class="tip" @tap="showx=true">
							《隐私政策》
						</text>
					</view>


				</view>
			</view>
			<image class="btn" @click="zhifu" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fcomponents%2Flogin%2Fbtn.png">
			</image>

		</view>

		<view class="agreement-main-box" v-if="show" style="z-index: 999;">
			<view class="agreement-box">
				<view class="title">{{title}}</view>
				<view class="content-box">
					<view class="content" v-for="item in content">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="show=false">我知道了</view>
			</view>
		</view>
		<view class="agreement-main-box" v-if="showx" style="z-index: 999;">
			<view class="agreement-box">
				<view class="title">{{title1}}</view>
				<view class="content-box">
					<view class="content" v-for="item in content1">
						{{item}}
					</view>
				</view>
				<view class="btn" @click="showx=false">我知道了</view>
			</view>
		</view>
		<image class="bg" mode="widthFix" src="https://h5.sx2b2c.com/images/tequan/back.jpg"></image>
		<view class="swiper" style="margin-left: -50rpx;">



		</view>
		<view class="submit-fix-box">
			<image @click="showLogins" class="submit-fix" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Fsubmit-fix.png">
			</image>
		</view>
		<view class="fix-order-main-box">
			<image @click="gotoOrderList" class="icon" mode="widthFix"
				src="https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fheijinka%2Ftongyong%2Forder-icon.png">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		statistics,
		createoder,
		wxLogin,
		getAliUseridHjk,
		order,
		getshenhe,
		getGoods
	} from '../../api/index.js'
	export default {
		data() {
			return {
				is: "",
				vipList: "",
				show: false,
				showx: false,
				titile: '订购须知',
				content: [
					'1、本产品为省心黑金卡年卡，每月自动下发至订购手机。用户凭订购手机号码前往【省心APP】查看及领取会员权益。',
					'2、活动期间订购本产品，可额外获得热门VIP会员每月领取资格（每月可领1款，共12次），实际可领取权益以页面展示为准，限每月月底前领取，逾期失效。',
					'3、本产品订购成功立即生效，不可退订。有效期12个月。',
					'4、单个号码仅可订购一次，不可重复订购。',
					'5、订购成功后，省心APP会员权益及热门VIP会员权益领取资格将在30分钟内下发，下发后可前往【省心APP】查看及领取每月权益。',
				],
				title1: '用户协议和隐私政策',
				content1: [
					"用户协议",
					"尊敬的用户，欢迎使用由成都启奔科技有限公司（下列简称为“启奔科技”）提供的服务。在使用前请您阅读如下服务协议，使用本应用即表示您同意接受本协议，本协议产生法律效力，特别涉及免除或者限制启奔科技责任的条款，请仔细阅读。如有任何问题，可向启奔科技咨询。",
					"1. 服务条款的确认和接受",
					"通过访问或使用本应用，表示用户同意接受本协议的所有条件和条款。",
					"2. 服务条款的变更和修改",
					"启奔科技有权在必要时修改服务条款，服务条款一旦发生变更，将会在重要页面上提示修改内容。如果不同意所改动的内容，用户可以放弃获得的本应用信息服务。如果用户继续享用本应用的信息服务，则视为接受服务条款的变更。本应用保留随时修改或中断服务而不需要通知用户的权利。本应用行使修改或中断服务的权利，不需对用户或第三方负责。",
					"3. 用户行为",
					"3.1 用户账号、密码和安全",
					"您需注册登录账号方可使用我司产品功能。",
					"3.2 账号注册时的禁止行为",
					"（1）请勿以党和国家领导人或其他社会名人的真实姓名、字号、艺名、笔名注册；",
					"（2）冒充任何人或机构，或以虚伪不实的方式谎称或使人误认为与任何人或任何机构有关的名称；",
					"（3）请勿注册和其他网友之名相近、相仿的名字；",
					"（4）请勿注册不文明、不健康名字，或包含歧视、侮辱、猥亵类词语的名字；",
					"（5）请勿注册易产生歧义、引起他人误解的名字；",
					"3.3 用户在本应用上不得发布下列违法信息和照片：",
					"（1）反对宪法所确定的基本原则的；",
					"（2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；",
					"（3）损害国家荣誉和利益的；",
					"（4）煽动民族仇恨、民族歧视，破坏民族团结的；",
					"（5）破坏国家宗教政策，宣扬邪教和封建迷信的；",
					"（6）散布谣言，扰乱社会秩序，破坏社会稳定的；",
					"（7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；",
					"（8）侮辱或者诽谤他人，侵害他人合法权益的；",
					"（9）含有法律、行政法规禁止的其他内容的；",
					"（10）禁止骚扰、毁谤、威胁、仿冒网站其他用户；",
					"（11）严禁煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；",
					"（12）严禁发布可能会妨害第三方权益的文件或者信息，例如（包括但不限于）：病毒代码、黑客程序、软件破解注册信息。",
					"（13）禁止上传他人作品。其中包括你从互联网上下载、截图或收集的他人的作品；",
					"（14）禁止上传广告、横幅、标志等网络图片；",
					"4. 服务内容",
					"本服务的具体内容由启奔科技根据实际情况提供，启奔科技可以对其提供的服务予以变更，且启奔科技提供的服务内容可能随时变更。",
					"",
					"隐私条款",
					"1.用户信息公开情况说明",
					"尊重用户个人隐私是启奔科技的一项基本政策。所以，启奔科技不会在未经合法用户授权时公开、编辑或透露其注册资料及保存在本应用中的非公开内容，除非有下列情况：",
					"（1）有关法律规定或启奔科技合法服务程序规定；",
					"（2）在紧急情况下，为维护用户及公众的权益；",
					"（3）为维护启奔科技的商标权、专利权及其他任何合法权益；",
					"（4）其他需要公开、编辑或透露个人信息的情况；",
					"在以下（包括但不限于）几种情况下，启奔科技有权使用用户的个人信息：",
					"（1）在进行促销或抽奖时，启奔科技可能会与赞助商共享用户的个人信息，在这些情况下启奔科技会在发送用户信息之前进行提示，并且用户可以通过不参与来终止传送过程；",
					"（2）启奔科技可以将用户信息与第三方数据匹配；",
					"（3）启奔科技会通过透露合计用户统计数据，向未来的合作伙伴、广告商及其他第三方以及为了其他合法目的而描述启奔科技的服务；",
					"2.隐私权政策适用范围",
					"（1）用户在使用本应用服务器时留下的个人身份信息；",
					"（2）用户通过本应用服务器与其他用户或非用户之间传送的各种资讯；",
					"（3）本应用与商业伙伴共享的其他用户或非用户的各种信息；",
					"（4）启奔科技软件十分注重保护用户的个人隐私，并制定了《隐私政策》，用户亦可以通过《隐私政策》，用户确认并同意使用启奔科技软件提供的服务将被视为接受《隐私政策》。",
					"3.资讯公开与共享",
					"启奔科技不会将用户的个人信息和资讯故意透露、出租或出售给任何第三方。但以下情况除外：",
					"（1）用户本人同意与第三方共享信息和资讯;",
					"（2）只有透露用户的个人信息和资讯，才能提供用户所要求的某种产品和服务;",
					"（3）应代表本应用提供产品或服务的主体的要求提供（除非我们另行通知，否则该等主体无权将相关用户个人信息和资讯用于提供产品和服务之外的其他用途）：根据法律法规或行政命令的要求提供;因外部审计需要而提供;用户违反了本应用服务条款或任何其他产品及服务的使用规定;经本站评估，用户的帐户存在风险，需要加以保护。",
					"4.非个人隐私信息",
					"为了改善启奔科技软件的技术和服务，向用户提供更好的服务体验，启奔科技或可会自行收集使用或向第三方提供用户的非个人隐私信息。",
					"5.如何联系我们",
					"您可以通过以下方式与我们联系，我们将在15天内回复您的请求：",
					"（1）如对本政策内容、个人信息有任何疑问、意见或建议，您可通过启奔科技客服邮箱：【912716425@qq.com】与我们联系。",
					"（2）如发现个人信息可能被泄露，您可以联系我们的客服人员进行投诉举报；",
					"如果您对我们的回复不满意，特别是您认为我们的个人信息处理行为损害了您的合法权益，您还可以通过向被告住所地有管辖权的法院提起诉讼来寻求解决方案。",
				],
				checked: false,
				mobile: '',
				name: "",
				flag: false,
				imgList: [{
						id: '0',
						image: "https://h5.sx2b2c.com/images/tequan/year.png"
					},
					{
						id: '1',
						image: "https://h5.sx2b2c.com/images/tequan/month.png"
					},
					{
						id: '0',
						image: "https://h5.sx2b2c.com/images/tequan/year.png"
					}, {
						id: '1',
						image: "https://h5.sx2b2c.com/images/tequan/month.png"
					},
				],
				buyType: '3'
			}
		},
		components: {

		},
		methods: {
			receive() {
				uni.showToast({
					title: '暂无领取权限',
					icon: 'none', //将值设置为 success 或者 ''
					duration: 2000 //持续时间为 2秒
				})
			},
			cancelLogin() {
				this.flag = false
			},
			changex(index) {

				console.log(index)
				if (index == 0 || index == 2) {
					this.name = 0
					this.flag = true
					this.buyType = 3 //年卡
				}
				if (index == 3 || index == 1) {
					this.name = 1
					this.flag = true
					this.buyType = 4 //月卡
				}


			},
			showLogin() {
				this.name = 0
				this.flag = true
			},
			showLogins() {
				if (wx.getSystemInfoSync().platform == 'ios') {
					uni.showToast({
						title: '由于相关规范，iOS功能暂不可用',
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else {
					this.name = 0
					this.flag = true
				}

			},
			zhifu() {
				console.log(this.mobile.length)
				if (this.mobile.length < 11) {

					console.log(this.mobile.length)
					uni.showToast({
						title: '手机格式错误',
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else if (this.checked == false) {
					uni.showToast({
						title: '请同意订购须知',
						icon: 'none', //将值设置为 success 或者 ''
						duration: 2000 //持续时间为 2秒
					})
				} else {

					order({
						mobile: this.mobile,
						type: 3,
						ordertype: 1,
						openid: uni.getStorageSync('openids'),
						a: '44ac7bbc86244c7c27f92f91c2db839c',
						buyType: this.buyType,
						pType: 1

					}).then((payRes) => {
						uni.getProvider({
							service: 'payment',
							success: res => {
								console.log(payRes)
								wx.requestPayment({
									timeStamp: payRes.data.timeStamp,
									nonceStr: payRes.data.nonceStr,
									package: payRes.data.package,
									signType: payRes.data.signType,
									paySign: payRes.data.paySign,
									success(res) {},
									fail(res) {}
								})
							},
							fail: res => {
								console.log('wxMiniPayHandler getProvider fail', res);
							}
						})

					})
				}
			},
			input() {

			},
			gotoOrderList() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}


		},
		onLoad(option) {
			getGoods({}).then((res) => {
				this.vipList = res.data
				console.log(this.vipList)
				this.vipList = this.vipList.reduce((acc, curr, index) => {
					if (index % 2 === 0) {
						acc.push({
							list: [curr]
						});
					} else {
						acc[acc.length - 1].list.push(curr);
					}
					return acc;
				}, [])
				console.log(this.vipList)
			})
			getshenhe({
				pid: 2,
				ver: 710
			}).then((res) => {
				console.log(res)
				this.is = res.data.is
			})
			//#ifdef MP-WEIXIN
			if (!uni.getStorageSync('openids')) {

				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes.code);
						// uni.setStorageSync('codexs', loginRes.code)
						getAliUseridHjk({
							code: loginRes.code,
							type: 3
						}).then((resx) => {
							uni.setStorageSync('openids', resx.data.user_id)
							console.log(resx, 1111)
						})

					}
				});
			}

			//#endif

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.login-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 2;

		.login-box {
			position: relative;
			width: 90%;

			.bg-image {
				display: block;
				width: 100%;
			}

			.login-close-icon {
				position: absolute;
				right: 0;
				top: 5rpx;
				width: 50rpx;
				height: auto;
				display: block;
				z-index: 10;
			}


		}

		.form-box {
			width: 80%;
			margin: 0 auto;
			position: absolute;
			left: 10%;
			bottom: 30rpx;

			.input-item-box {
				padding: 30rpx 0 0;

				.input-label {
					font-family: SourceHanSansSC-Bold;
					font-size: 30rpx;
					letter-spacing: 1rpx;
					color: #141414;
					font-weight: 600;
				}

				.input-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fde4bc;
					height: 80rpx;
					border-radius: 45rpx;

					&>input {
						font-size: 29rpx;
						letter-spacing: 1rpx;
						color: #7f6e5c;
						background: none;
						border: none;
						flex-grow: .9;
						height: 70rpx;
						padding-left: 20rpx;
					}

					::-webkit-input-placeholder {
						/* WebKit browsers */
						color: #7f6e5c;
					}

					::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: #7f6e5c;
					}

					:-ms-input-placeholder {
						/* Internet Explorer 10+ */
						color: #7f6e5c;
					}

					.send-code {
						font-size: 25rpx;
						letter-spacing: 1rpx;
						color: #fff;
						text-align: center;
						background-color: #f94338;
						border-radius: 120rpx;
						padding: 13rpx 25rpx;

					}
				}
			}

			.agreement-box {
				display: flex;
				align-items: center;
				color: #fffefe;
				font-size: 20rpx;
				margin-top: 20rpx;

				.tip {
					color: #ffe2b8;
				}
			}


		}


		.btn {
			margin: 30rpx auto 0;
			width: 60%;
			height: auto;
			display: block;
		}
	}

	.boxs {

		display: flex;
		margin-top: 16rpx;
		align-items: center;
		font-size: 22rpx;


	}

	.title {
		margin-left: 10rpx;

	}

	.notice {
		color: #fde4bc;
	}

	.main-box {
		position: relative;
		padding-bottom: 80rpx;
		background-color: #1e1e1e;
	}

	.bg {
		width: 100%;
		height: auto;
		display: block;
	}

	.submit {
		width: 90%;
		height: auto;
		position: absolute;
		left: 5%;
		top: 34vw;
	}

	.swiper {
		width: 100%;
		height: auto;
		position: absolute;
		left: 5%;
		top: 34vw;
	}

	.hidden {
		display: none !important;
	}

	.submit-fix-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.submit-fix {
			display: block;
			max-width: 450rpx;
			height: auto;
			animation: butChange 1s infinite;
		}
	}

	.agreement-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 3;

		.agreement-box {
			border-radius: 20rpx;
			background-color: #faf7f2;
			padding: 30rpx;
			width: 85%;
			box-sizing: border-box;

			.title {
				text-align: center;
				color: #f94439;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}

			.content-box {
				max-height: 50vh;
				overflow: auto;

				.content {
					font-size: 25rpx;
					color: #515151;
					margin-top: 30rpx;
					line-height: 45rpx;
				}

			}

			.btn {
				width: 300rpx;
				font-size: 25rpx;
				letter-spacing: 2rpx;
				color: #fff;
				text-align: center;
				background-color: #f94338;
				border-radius: 120rpx;
				padding: 13rpx 0;
				font-size: 32rpx;
				margin: 10rpx auto 0;
			}
		}
	}

	.fix-order-main-box {
		position: fixed;
		right: 0;
		top: 550rpx;

		.icon {
			width: 150rpx;
			height: auto;
		}
	}

	.common-box {
		width: 96%;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 20rpx auto;

		.common-title {
			font-family: SourceHanSansSC-Medium;
			font-size: 45rpx;
			font-weight: 600;
			color: #f9dba9;

			.sub-title {
				font-size: 30rpx;
				color: #d68e69;
				margin-left: 20rpx;
			}
		}

		.common-sub-title {
			font-size: 30rpx;
			color: #d68e69;
			margin-top: 10rpx;
		}
	}

	.hot-box {
		position: absolute;
		left: 2%;
		top: 100vw;

		.hot-swiper-box {
			margin-top: 20rpx;

			.hot-swiper {
				min-height: 570rpx;

				::v-deep .uni-swiper-dot-active {
					background-color: #fda24e !important;
				}

				.item {
					background-image: linear-gradient(2deg,
							#de9b5a 0%,
							#ffe9ba 94%),
						linear-gradient(#ebe3d2,
							#ebe3d2);
					border-radius: 20rpx;
					position: relative;
					width: 95%;
					margin-bottom: 10rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.img {
						max-width: 100%;
						height: auto;
						display: block;
					}

					.btn {
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 20rpx;
						background: #a30004;
						color: #fed398;
						text-align: center;
						position: absolute;
						bottom: 15rpx;
						left: 50%;
						transform: translateX(-50%);
						font-size: 25rpx;
					}
				}
			}
		}
	}
</style>